<div>
    <md-tabs md-dynamic-height md-border-bottom>
        <md-tab>
            <md-tab-label>{{ 'HELP_ICON.TAB.OVERVIEW' | translate }}</md-tab-label>
            <md-tab-body>
                <md-content layout="column" class="help-tab">
                    <div style="margin-top: 10px;" class="md-headline">
                        {{ 'HELP_ICON.ANON.VPN.OVERVIEW.TITLE' | translate}}
                    </div>
                    <div>
                        <p translate="HELP_ICON.ANON.VPN.OVERVIEW.P1"></p>
                        <p>
                            <span translate="HELP_ICON.ANON.VPN.OVERVIEW.P2_PRE"></span>
                            <a class="orange" ng-href="{{ 'HELP_ICON.ANON.VPN.OVERVIEW.P2_LIST_URL' | translate }}" target="blank" translate="HELP_ICON.ANON.VPN.OVERVIEW.P2_LIST_TEXT"></a>
                        </p>

                        <p>
                            <span translate="HELP_ICON.ANON.VPN.OVERVIEW.P3_PRE"></span>
                            <a class="orange" ng-href="{{ 'HELP_ICON.ANON.VPN.OVERVIEW.P3_SUPPORT' | translate }}" target="blank" translate="HELP_ICON.ANON.VPN.OVERVIEW.P3_SUPPORT"></a><!--
                            --><span translate="HELP_ICON.ANON.VPN.OVERVIEW.P3_POST"></span>
                        </p>
                    </div>
                    <!--<div ng-bind-html="vm.contentOverview | htmlSafe"></div>-->
                </md-content>
            </md-tab-body>
        </md-tab>

        <!-- comment or uncomment to show or hide details section -->
        <md-tab>
            <md-tab-label>{{ 'HELP_ICON.TAB.DETAILS' | translate }}</md-tab-label>
            <md-tab-body>
                <md-content layout="column" class="help-tab">
                    <div>
                        <p translate="HELP_ICON.ANON.VPN.DETAILS.P1"></p>
                    </div>
                </md-content>
            </md-tab-body>
        </md-tab>

        <!-- comment or uncomment to show or hide additional-resource section -->
        <!--<md-tab>-->
        <!--<md-tab-label>{{ 'HELP_ICON.TAB.ADDITIONAL' | translate }}</md-tab-label>-->
        <!--<md-tab-body>-->
        <!--<md-content layout="column" class="help-tab">-->
        <!--&lt;!&ndash;<div style="margin-top: 10px;" class="md-headline">{{ vm.title | translate }}</div>&ndash;&gt;-->
        <!--&lt;!&ndash;<div ng-bind-html="vm.contentAdditionalResources | htmlSafe"></div>&ndash;&gt;-->
        <!--</md-content>-->
        <!--</md-tab-body>-->
        <!--</md-tab>-->
    </md-tabs>
</div>
